<template>
  <div class="home">
    <Motto word1="时间是一个伟大的作者" word2="她必将给每一个人都写出完美的结局"/>
    <div class="home_box">
      <div class="home_left">
        <Article/>
        <Article/>
        <Article/>
      </div>
      <div class="home_right">
        <RightNavbar title="标签">
          <div class="label_content">
            <Label/>
            <Label/>
            <Label/>
            <Label/>
            <Label/>
            <Label/>
            <Label/>
          </div>
        </RightNavbar>
        <RightNavbar title="最近文章">
          <ul class="article_ul">
            <li>
              <RouterLink to="">wwsssssssssssssssssssssssssssssssssssssse</RouterLink>
            </li>
            <li>
              <RouterLink to="">文章2</RouterLink>
            </li>
            <li>
              <RouterLink to="">文章3</RouterLink>
            </li>
            <li>
              <RouterLink to="">文章4</RouterLink>
            </li>
          </ul>
        </RightNavbar>
      </div>
    </div>
  </div>

</template>
<script setup lang="ts">
import Motto from "@/components/Motto.vue";
import Article from "@/components/Article.vue";
import Label from "@/components/Label.vue";
import RightNavbar from "@/components/RightNavbar.vue";
</script>
<style scoped>
ul{
  list-style: none;
}
.home{
  position: relative;
}
.home_box{
  display: flex;
  position: relative;
  margin: 0 auto;
  width: 1000px;
  //height: 700px;
  overflow: hidden;
}
.home_left{
  flex: 3;
  //min-width: 240px;
  //background: #ffffff;
}
.home_right{
  position: relative;
  flex: 1;
  margin-left: 10px;
  max-width: 280px;
}
.label_content{
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  align-content: flex-start;
}
.article_ul li a{
  max-width: 280px;
  margin: 10px 20px;
  padding: 5px;
  display: block;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;

}
.article_ul li a:hover{
  background: #eee;
}
</style>
